<template>
    <div style="margin-left: 50px; margin-top: 30px;">
        <!--表格头部-->
        <el-form :inline="true"  class="demo-form-inline" style="padding-left: 10px;">
            <el-form-item label="部门">
                <el-input  placeholder="请输入部门" v-model="sectionSearch"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="nameSearch" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="selectSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="trainReport"
            style="width: 80%"
            :row-class-name="tableRowClassName">
            <el-table-column
                prop="section"
                label="部门"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="lastTime"
                label="最后一次培训时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="addUpTime"
                label="累计总时长(分钟)">
            </el-table-column>
            <el-table-column
                prop="userId">
                <template slot-scope="scope">
                    <el-button @click="goTrainDetail(scope.row.userId)" type="text" size="small">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :current-page="currentPage"
            :page-size="15"
            :total="count">
        </el-pagination>
    </div>

</template>
<style>
    .el-table .warning-row {
        background: oldlace;
    }


    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<script>
    //导入需要使用的方法
    import {getTrainReport} from '../api/train.js'

    export default {

        name: "Train",
        //返回的数据，和页面交互
        data() {
            return {
                sectionSearch: "",
                nameSearch: "",
                //多加一层 解决双向绑定查询分页时数据变化问题
                sectionGo: "",
                nameGo: "",
                trainReport: [{
                    section: "",
                    name: "",
                    addUpTime: "",
                    lastTime: "",
                    userId: ""
                }],
                currentRow: null,
                offset: 0,
                limit: 15,
                count: 0,
                currentPage: 1
            }
        },
        //在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
        created(){
            this.trainReport = [];
            this.initData();
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //根据条件查询数据
            selectSubmit() {
                //将参数传递到后台 sectionSearch:部门  nameSearch: 姓名  addUpTimeSearch: 累计总时长
                //调用方法
                //将返回的数据给 trainReport
                this.sectionGo = this.sectionSearch;
                this.nameGo = this.nameSearch;
                this.getTrain()
            },
            //初始化数据
            initData() {
                //this.trainReport.splice(0);
                this.getTrain();
            },
            goTrainDetail(id) {
                this.$router.push({ name: 'trainDetail', params: {id: id}});
            },
            //绑定方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1) * this.limit;
                this.getTrain()
            },
            //请求获取数据
            getTrain() {
                getTrainReport({
                                            begin: this.offset, end_y: this.limit
                                            , user_name: this.nameGo, dept_name: this.sectionGo})
                    .then((res) => {
                        // console.log(res)
                        this.count = res.total;
                        this.trainReport = [];

                        //输出一下数据，看看字段有没有对上
                        res.queryList.forEach(item => {
                            const TrainReport = {};
                            TrainReport.name = item.username;
                            TrainReport.section = item.dept_name;
                            TrainReport.addUpTime = item.cumulative_time;
                            TrainReport.lastTime = item.end_time;
                            TrainReport.userId = item.user_id;
                            this.trainReport.push(TrainReport);
                        });
                    }).catch(function (error) {
                        console.log(error)
                })
            }
        }
    }
</script>

<style scoped>

</style>
